<template>
	<view class="">
		<form @submit="formSubmit">
			<view class="list">
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						投资区域
					</view>
					<!-- <view class="no-data-r">请选择三个理想的投资区域</view> -->
					<view class="acea-row row-middle row-right item-r sanjiao-right" @click="goServiceArea">
						<input class="input-r" type="text" placeholder="请选择三个理想的投资区域"
							placeholder-class="placeholder-class" v-model="regionName" disabled />
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						投资金额
					</view>
					<view class="acea-row row-middle row-right item-r">
						<input class="input-r" type="text" placeholder="示例:100" placeholder-class="placeholder-class"
							v-model="money" name='money' @input="fillTile">
						<text>万元</text>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						投资面积
					</view>
					<!-- <view class="item-r sanjiao-right">
					<view class="no-data-r">请选择面积范围</view>
				</view> -->
					<view class="acea-row row-middle row-right floor">
						<input type="number" placeholder="示例:20" v-model="area1" placeholder-class="placeholder-class"
							style="width: 100rpx;">—
						<input type="number" placeholder="示例:30" v-model="area2" placeholder-class="placeholder-class"
							style="width: 100rpx;">
					</view>
				</view>
				<!-- 				<view class="acea-row row-middle row-between item border-b " v-if="categoryOn!= 5">
					<view class="label label-m">
						楼层要求
					</view>
					<view class="acea-row row-middle row-right item-r">
						<input class="input-r" type="text" placeholder="示例:1-2" placeholder-class="placeholder-class"
							v-model="floor" name='floor'>
						<text>层</text>
					</view>
				</view> -->
				<view class="acea-row row-middle row-between item border-b " v-if="categoryOn!= 5">
					<view class="label">
						楼层
					</view>
					<view class="acea-row row-middle row-right item-r floor">
						<view class="">第</view>
						<input type="number" v-model="floor[0]">
						<view class="">层</view>
						<view class="margin-l">共</view>
						<input type="number" v-model="floor[1]">
						<view class="">层</view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						单价
					</view>
					<view class="acea-row row-middle row-right item-r">
						<input class="input-r" type="text" placeholder="请输入价格" placeholder-class="placeholder-class"
							v-model="price" name='price' />
						<text>元/㎡</text>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">投资回报率</view>
					<view class="acea-row row-middle row-right item-r small-ipt">
						<input type="number" placeholder="示例:50" placeholder-class="placeholder-class" v-model="rate"
							name='rate'>
						<text>%</text>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label label-m">
						付款方式
					</view>

					<view class="acea-row row-middle row-right item-r sanjiao-right" @click="openPopupShow = true">
						<!-- <input class="input-r" type="text" placeholder="请选择付款方式" v-model="payType"
							name='payType' placeholder-class="placeholder-class" disabled> -->
						<payType v-model="payType" />
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						标题
					</view>
					<view class="acea-row row-middle row-right item-r">
						<input class="input-r" type="text" placeholder="请输入标题" placeholder-class="placeholder-class"
							v-model="title" name='title' />
					</view>
				</view>
				<!-- 联系人 -->
				<view class="acea-row row-middle row-between item ">
					<view class="label label-m">
						联系人
					</view>
					<view class="add-icon" @click="addContact">
						<image src="../static/images/add_icon.png" mode=""></image>
					</view>
				</view>
				<view class="item border-b">
					<!-- <view class="contact-list">
						<view class="acea-row row-middle row-between contact-p" v-for="(item,index) in contactList"
							:key="index">
							<view class="acea-row row-middle row-between contact-r">
								<view class="add-icon" @click="deleteContact(index)">
									<image src="../static/images/sub_icon.png" mode=""></image>
								</view>
								<view class="name"
									@click="toPage('/pages/releases/addShopContact/addShopContact?info='+JSON.stringify(item) + '&infoIndex='+index)">
									{{item.username}}</view>
								<view class="gray-text" v-if='item.type == 1'>
									房东
								</view>
								<view class="gray-text" v-if='item.type == 2'>
									老板
								</view>
								<view class="gray-text" v-if='item.type == 3'>
									雇员
								</view>
								<view class="gray-text"
									@click="toPage('/pages/releases/addShopContact/addShopContact?info='+JSON.stringify(item) + '&infoIndex='+index)">
									{{item.phone}}
								</view>
							</view>
							<view class="acea-row row-middle check-box" v-if="item.open == 0">
								<image src="../static/images/checkbox_no.png" mode="" @click="openChange(item,1)">
								</image>
								<text>公开</text>
							</view>
							<view class="acea-row row-middle check-box" v-if="item.open == 1">
								<image src="../static/images/checkbox_on.png" mode="" @click="openChange(item,0)">
								</image>
								<text>公开</text>
							</view>
						</view>
					</view> -->
					<chooseContact :list="contactList" :dataform="dataform" @add="d=>contactList.push(d)"
						@del="toDel" />

				</view>
				<!-- 补充描述 -->
				<view class="module">
					<view class="module-title">
						补充描述
					</view>
					<view class="textacea-box">
						<textarea placeholder="请输入描述" v-model="details" name='details'
							:maxlength="maxLength"></textarea>
						<view class="num-text">
							{{details?details.length:0}}/{{maxLength}}
						</view>
					</view>
				</view>
			</view>
			<button class="submit-btn" form-type="submit">
				完成
			</button>
		</form>
		<serviceArea ref="serviceArea" @area="handleArea" :selectedData="selectCityData" />
		<!-- <dictionaryType :gids="27" @clickOk="clickOk"  :popupShow="openPopupShow" @popupClose="openPopupShow = false"  /> -->

	</view>
</template>

<script>
	import dictionaryType from '../components/dictionaryType.vue'
	import {
		Debounce
	} from '@/utils/validate.js'
	import {
		PurchaseAdd,
		BuyDetailApi,
		updateBuy
	} from '@/api/subletOfShop.js'
	import {
		getCategory,
		toPage
	} from '@/filters/commFilter.js'
	import serviceArea from '../components/area.vue';
	import payType from './payType.vue'
	import chooseContact from '../components/chooseContact.vue'
	export default {
		components: {
			serviceArea,
			dictionaryType,
			payType,
			chooseContact
		},
		props: ['typeOn', 'categoryOn', 'location', 'editId','storeCategory'],
		data() {
			return {
				payType: '',
				area1: '',
				area2: '',
				money: '', //投资金额
				floor: ['1', '1'], //楼层要求
				price: '', //单价
				rate: '', //投资回报率
				title: '', //标题
				contactList: [],
				selectCityData: [],
				maxLength: 200,
				details: '',
				openPopupShow: false,
				regionName: '', //投资区域名称
				dataform: {

				},
				isCompleteInit: false,
				dtime: null

			}
		},
		mounted() {
			let that = this;

			getApp().globalData.initContact()

			console.log(this.editId)
			if (this.editId) {
				this.getDetail()
			}
		},
		watch: {
			categoryOn(val) {
				this.fillTile()
			},
			area2(){
				this.fillTile()
			},
			regionName() {
				// this.selectCityData = this.dataform.hopeArea?[this.dataform.hopeProvince,this.dataform.hopeCity, this.dataform.hopeArea]:[];
				// let d = [];
				// this.dataform.hopeArea && this.dataform.hopeArea.split(',').forEach(area => {
				// 	d.push([this.dataform.hopeProvince, this.dataform.hopeCity, area])
				// })
				// this.selectCityData = d;
			}
		},
		methods: {
			toPage,
			//去选择投资区域
			goServiceArea() {
				this.$refs.serviceArea.filtrateShow = true;
			},
			toDel(index, info, callback) {
				if (info) {
					this.contactList.splice(index, 1, info);
				} else {
					this.contactList.splice(index, 1);
				}
				callback && callback();
			},
			//意向城市
			handleArea(areaInfo) {
				if (this.dtime) {
					clearTimeout(this.dtime);
					this.dtime = null;
				}
				this.dtime = setTimeout(() => {
					//编辑不初始化
					if (!this.isCompleteInit) {
						this.isCompleteInit = true;
						console.log("zhixing", this.edit)
						if (this.editId) {
							console.log("eeeeee")
							return;
						}
					}
					console.log('areaInfo', areaInfo)
					this.dataform.hopeArea = areaInfo.districtIds;
					console.log("areaInfo", areaInfo)
					this.dataform.hopeProvince = areaInfo.hopeProvince;
					this.dataform.hopeCity = areaInfo.hopeCity;
					this.regionName = areaInfo.regionName;
					console.log(this.regionName)
					this.fillTile();
				}, 500)

			},
			//自动填充标题
			fillTile() {
				const category = getCategory(this.categoryOn).name;
				this.title = this.money ? this.money + '万元求购' + category : this.title;
				this.$forceUpdate()
			},
			formSubmit: Debounce(function(e) {
				let that = this
				if (!that.money) return that.$util.Tips({
					title: '请输入投资金额'
				});
				if (!that.area1 || !that.area2) return that.$util.Tips({
					title: '请输入投资面积'
				});
				if (!that.floor) return that.$util.Tips({
					title: '请输入楼层要求'
				});
				if (!that.payType) return that.$util.Tips({
					title: '请输入付款方式'
				});
				if (that.contactList.length == 0 || !that.contactList) return that.$util.Tips({
					title: '请输入输入联系人'
				});
				e.detail.value.contacts = that.contactList.map(item => {
					const {
						id,
						type,
						open,
						infoId,
						were
					} = item;
					return {
						contactId: id,
						infoId,
						identity: type,
						open,
						were
					}
				})

				e.detail.value.storeCategory = getCategory(that.categoryOn).value
				e.detail.value = {
					...this.dataform,
					...e.detail.value,
					...this.location,
					area: that.area1 + '-' + that.area2,
					city: this.$cityCode ? this.$cityCode[1] : '',
					province: this.$cityCode ? this.$cityCode[0] : '',
					district: this.$cityCode ? this.$cityCode[2] : '',
				}
				e.detail.value.floor = this.floor.join('-')
				e.detail.value.buystoreId = this.editId
				e.detail.value.payType = that.payType
				if (this.editId) {
					console.log('edit')
					updateBuy(e.detail.value).then(res => {
						if (res.code == 200) {
							that.$util.Tips({
								title: '编辑成功'
							}, {
								tab: 2,
								url: '/pages/releases/rentalStores/rentalStores'
							})
						} else {
							that.$util.Tips({
								title: '编辑失败'
							})
						}
					}).catch(e => {
						this.$util.Tips({
							title: e
						})
					})

				} else {
					PurchaseAdd(e.detail.value).then(res => {
						if (res.code == 200) {
							that.$util.Tips({
								title: '发布成功'
							}, {
								tab: 2,
								url: '/pages/releases/rentalStores/rentalStores'
							})
						}
					})
				}

			}),
			deleteContact(index) {
				this.contactList.splice(index, 1)
				console.log(this.contactList)
			},
			openChange(row, index) {
				row.open = index
			},
			addContact() {
				uni.navigateTo({
					url: '/pages/releases/addShopContact/addShopContact'
				})
			},
			//确认选择支付方式
			clickOk(val) {
				this.popupShow = false;
				this.payType = val.map(item => {
					return item.describe
				}).join(',')
				this.openPopupShow = false
			},
			// clickOk(val) {
			// 	if (this.gids == 15) {
			// 		this.supportingFacility = val
			// 	} else if (this.gids == 27) {
			// 		this.payType = val.map(item => {
			// 			return item.describe
			// 		}).join(',')
			// 	}
			// 	this.openPopupShow = false
			// },
			getDetail() {
				BuyDetailApi(this.editId,{
					storeCategory:this.storeCategory
				}).then(res => {
					console.log('editShop', res)
					if (res.code == 200) {
						this.dataform = res.data
						let d = res.data
						let notFiled = ['contacts', ]
						let hope = [];
						this.dataform.hopeArea && this.dataform.hopeArea.split(',').forEach(area => {
							hope.push([this.dataform.hopeProvince, this.dataform.hopeCity, area])
						})
						console.log("hope", this.selectCityData)
						this.selectCityData = hope;
						for (let k in this.dataform) {
							if (this.hasOwnProperty(k)) {
								if (notFiled.indexOf(k) == -1) {
									this[k] = this.dataform[k]
								}
							}
						}
						this.floor = d.floor ? d.floor.split('-') : [1, 1];
						this.area1 = d.area.split('-')[0]
						this.area2 = d.area.split('-')[1]
						this.regionName = d.hopeAreaName
						if (this.dataform.contacts && this.dataform.contacts.length > 0) {
							this.contactList = this.dataform.contacts.map(item => ({
								...item,
								username: item.contactName,
								phone: item.contactPhone,
								id: item.contactId,
								infoId: item.id,
								type: item.contactType
							}))
							delete this.dataform.contacts
						}


					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';

	.list .item-r {
		width: calc(100% - 180rpx);
	}

	.item .small-ipt {
		// width: calc(100% - 140rpx);
		width: 60%;

	}

	.item .small-ipt input {
		display: block;
		width: 130rpx;
		text-align: right;
	}
</style>